<template>
  <div>
    <div class="buy_header">
      <div class="new" @click="newChange">
        <span>{{ title }}</span>
        <img src="../../../../assets/img/home/ic_new_down.png" alt="" />
      </div>
      <div class="title_price" @click="priceClick">
        <span>价格</span>
        <span>
          <span class="icon_price_top">
            <img
              v-if="!priceTopShow"
              src="../../../../assets/img/home/price/top.png"
              alt=""
            />
            <img
              v-else
              src="../../../../assets/img/home/price/top_active.png"
              alt=""
            />
          </span>
          <span>
            <img
              v-if="!priceDownShow"
              src="../../../../assets/img/home/price/down.png"
              alt=""
            />
            <img
              v-else
              src="../../../../assets/img/home/price/down_active.png"
              alt=""
            />
          </span>
        </span>
      </div>
      <div class="choice">
        <span>选择游戏</span>
        <img src="../../../../assets/img/home/bt_right.png" alt="" />
      </div>
      <ul class="header_popup" v-show="titleShow">
        <li
          v-for="(title, index) in titles"
          :key="index"
          :style="{ color: currentIndex === index ? '#ff5543' : '' }"
          @click="titleClick(index)"
        >
          {{ title }}
        </li>
      </ul>
    </div>
    <div class="content_box">
      <ul class="item_box">
        <li class="item_list" v-for="(item, index) in list" :key="index" @click="$router.push('/goods/gameinfo/gameid')">
          <div>{{ item.time | getTimer }}</div>
          <div class="list_content">
            <img :src="item.icon" alt="" />
            <div class="info_right">
              <div class="game_name">{{item.name}}</div>
              <div class="game_title">{{item.title}}</div>
              <div class="game_amount">
                <div class="game_total">小号累充{{item.total.toFixed(2)}}元</div>
                <div class="amount_list">
                  <span>¥</span>
                  <span>{{item.amount}}</span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleShow: false,
      priceTopShow: false,
      priceDownShow: false,
      title: "",
      titles: ["最新出售", "最新成交"],
      currentIndex: 0,
      list: [
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
        {
          time: "1619056800",
          icon: "https://p1.277sy.com/2021/04/21/607fd6f5b103b.jpg",
          name: "狩游世界-送GM真万充",
          title: "便宜卖 没时间玩",
          amount: 250,
          total: 618,
        },
      ],
    };
  },
  created() {
    this.title = this.titles[this.currentIndex];
  },
  methods: {
    newChange() {
      this.titleShow = true;
    },
    titleClick(index) {
      this.currentIndex = index;
      this.titleShow = false;
      this.title = this.titles[this.currentIndex];
    },
    priceClick() {
      if (!this.priceTopShow && !this.priceDownShow) {
        this.priceDownShow = true;
      } else if (this.priceDownShow && !this.priceTopShow) {
        this.priceDownShow = false;
        this.priceTopShow = true;
      } else if (!this.priceDownShow && this.priceTopShow) {
        this.priceTopShow = false;
      }
    },
  },
  filters: {
    getTimer(item) {
      var time = new Date(item * 1000)
      var Y = time.getFullYear()
      var M = time.getMonth() + 1
      var D = time.getDate()
      var h = time.getHours()
      h = h < 10 ? '0' + h : h
      var m = time.getMinutes()
      m = m < 10 ? '0' + m : m
      var s = time.getSeconds()
      s = s < 10 ? '0' + s : s
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
    }
  },
};
</script>

<style lang="less" scoped>
.buy_header {
  position: fixed;
  top: 0;
  width: 10rem;
  height: 1.066667rem;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: 0 0.426667rem;
  line-height: 1.066667rem;
  display: flex;
  align-items: center;
  font-size: 0.373333rem;
  color: #222222;
  font-weight: bold;
  .new {
    img {
      margin-left: 0.106667rem;
      width: 0.266667rem;
      height: 0.266667rem;
    }
  }
  .title_price {
    padding: 0 1.173333rem 0;
    display: flex;
    align-items: center;
    .icon_price_top {
      display: block;
      margin-bottom: 0.053333rem;
    }
    img {
      margin-left: 0.133333rem;
      display: block;
      width: 0.133333rem;
      height: 0.133333rem;
    }
  }
  .choice {
    color: #ff5543;
    img {
      margin-left: 0.066667rem;
      width: 0.24rem;
      height: 0.24rem;
    }
  }
}

.header_popup {
  position: fixed;
  left: 0;
  top: 1.066667rem;
  font-size: 0.346667rem;
  font-weight: 400;
  padding: 0 0.426667rem;
  width: 10rem;
  background: #fff;
  box-shadow: 0 0.066667rem 0.2rem rgba(0, 0, 0, 0.3);
}

.content_box {
  position: fixed;
  top: 1.066667rem;
  width: 10rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  overflow: scroll;
}

.content_box::-webkit-scrollbar {
  display: none;
}

.item_box {
  width: 9.146667rem;
  padding: 0 0.426667rem;
  .item_list {
    box-sizing: border-box;
    width: 9.146667rem;
    height: 2.96rem;
    border-radius: 0.266667rem;
    background: #fff;
    margin-bottom: 0.266667rem;
    padding: 0.4rem 0.266667rem;
    font-size: 0.32rem;
    color: #999;
    .list_content {
      margin-top: 0.133333rem;
      width: 100%;
      height: 1.706667rem;
      display: flex;
      align-items: center;
      img {
        height: 1.706667rem;
        width: 3.066667rem;
        border-radius: .133333rem;
        margin-right: .293333rem;
      }
      .info_right {
        flex: 1;
        .game_name {
          font-size: .373333rem;
          font-weight: bold;
          color: #222222;
        }
        .game_title {
          line-height: .666667rem;
        }
        .game_amount {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #ff5543;
          .game_total {
            font-size: .266667rem;
            line-height: .36rem;
            padding: 0 .08rem;
            background: #FFF1F1;
          }
          .amount_list {
            span:nth-child(1) {
              font-size: .293333rem;
              padding-right: .08rem;
            }
            span:nth-child(2) {
              font-size: .48rem;
            }
          }
        }
      }
    }
  }
}
</style>